<!--
 * @Author: 'yangyuhang1203' '2621131059@qq.com'
 * @Date: 2025-09-11 14:21:03
 * @LastEditors: 'yangyuhang1203' '2621131059@qq.com'
 * @LastEditTime: 2025-09-11 14:34:06
 * @FilePath: \企业级\前端\Vue\Vue生命周期.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message"><br>
        <span>{{message}} </span><br/>
        <span v-bind:title="message">
         鼠标悬停看消息
        </span>
    </div>
    <script>
        var app = new Vue({
        el: '#app',
        data: {
        message: 'Hello Vue!'
        },
        beforeCreate(){
        console.log("Vue实例初始化后,事件配置之前 --- beforeCreate ---")
        console.log("当前实例对象",this.message)
        console.log("挂载⽬标：",this.$el)
        console.log(" --- beforeCreate ---")
        },
        created(){
        console.log(" ----- 创建后 ----- created ---")
        console.log("当前实例对象",this.message)
        console.log("挂载⽬标：",this.$el)
        console.log(" ----- 创建后 ----- created ---")
        },
        beforeMount(){
        console.log("---- 挂载前 ----- beforeMounted --- ")
        console.log("挂载⽬标",this.$el)
        console.log("---- 挂载前 ----- beforeMounted --- ")
        },
        mounted(){
        console.log("---- 挂载后----- mounted --- ")
        console.log("挂载⽬标",this.$el)
        console.log("---- 挂载后 ----- mounted --- ")
        },
        beforeUpdate(){
        console.log("---- 更新之前 ---- beforeUpdate ---")
        console.log("数据：",this.message)
        this.message = "beforeUpdate"
        console.log("---- 更新之前 ---- beforeUpdate ---")
        },
        updated(){
        console.log("---- 更新之前 ---- updated ---")
        console.log("数据：",this.message)
        console.log("---- 更新之前 ---- updated ---")
        },
        beforeDestory(){
        console.log('---- beforeDestory.......')
        console.log("--------销毁之前。。。。",this.message)
        console.log('---- beforeDestory.......')
        },
        destroyed(){
        console.log('---- destoryed.......')
        console.log("--------销毁之后。。。。",this.message)
        console.log('---- destoryed.......')
        }
        })
    </script>
</body>
</html>